/*
* @Author: Choisaaaa
* @Date: 2018/5/6  0:01
* ES6 模板字符串``
*/

// --------------------------1.基本用法
let str = `
<div>
    <h1 class="title">123</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

//---------------------------2. 嵌套变量的用法 ${变量，方法，表达式}
let name = 'Mark';
let str = `
<div>
    <h1 class="title">${name}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

//----------------------------3. 嵌套函数的用法
let getName = () => {
    return 'Mark Test';
};
let str = `
<div>
    <h1 class="title">${getName()}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

// -----------------------------4循环嵌套
let names = ['Mark1', 'Mark2', 'Mark3'];
let str = `
    <ul>
        ${
    names.map(name => `<li>Hi, I am ${name}</li>`).join('')
    }
    </ul>
`;
document.querySelector('body').innerHTML = str;